<template>
  <common-list-group>
    <div slot="group" class="custom-search-wrap">
      <!-- <div class="group-header-wrap">
        <div class="group-header-title">事件类型</div>
      </div> -->
      <common-tree
        ref="customTreeRef"
        isSlot
        :treeData="customTreeData"
        :treeProp="customTreeProp"
        search-placeholder="搜索"
        @getParentNodeData="getParentNodeData"
      >
        <div
          slot-scope="{ scope }"
          class="tree-item-wrap"
          @click="customTreeClick(scope.data, scope.node)"
        >
          <span>{{ scope.data.columnAlias }}</span>
          <span>{{ scope.data.catagoryCount }}</span>
        </div>
      </common-tree>
    </div>
    <common-table
      slot="content"
      ref="custom"
      :data="customList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="字段值"
        align="left"
        prop="value"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="计数" align="left" prop="count">
      </el-table-column>
      <el-table-column label="百分比" align="left" prop="ratio">
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="customTotal > 0"
      :total="customTotal"
      :page.sync="customQuery.pageNum"
      :limit.sync="customQuery.pageSize"
      :pagerCount="5"
      :layout="'total, prev, pager, next, jumper'"
      @pagination="getCustomList"
    />
  </common-list-group>
</template>

<script>
export default {
  props: {
    customTreeData: {
      type: Array,
      default: () => [],
    },
    customTotalList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      customQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      customTreeProp: {
        children: "children",
        label: "columnAlias",
        disabled: false,
      },

      customTotal: 0,
      currentType: "",
      customList: [],
      checkedCache: {},
    };
  },

  methods: {
    getParentNodeData(val) {
      this.$emit("getParentNodeData", val);
    },

    customTreeClick(data, node) {
      this.currentType = data.columnName;
      this.getCustomList();
    },

    // 自定义查询 点击左边树 查询右侧列表
    getCustomList() {
      console.log(this.customQuery);
      this.customList = this.customTotalList.filter((item) => {
        return item.columnName === this.currentType;
      });
      this.customTotal = this.customList.length;

      this.customList = this.customList.slice(
        (this.customQuery.pageNum - 1) * this.customQuery.pageSize,
        this.customQuery.pageNum * this.customQuery.pageSize
      );

      this.$forceUpdate();

      // 切换时重新选中缓存的值
      console.log(this.$refs.custom);

      const checked = this.checkedCache[this.currentType] || [];
      const rows = this.customTotalList.filter((item) => {
        if (checked.length === 0) return false;
        return checked.some((c) => c.id === item.id);
      });
      this.$nextTick(() => {
        console.log("checked rows: ", rows);
        const tableRef = this.$refs.custom && this.$refs.custom.$refs.table;
        if (rows.length > 0 && tableRef) {
          rows.forEach((row) => tableRef.toggleRowSelection(row, true));
        }
      });
    },

    handleSelectionChange(selection) {
      console.log(selection);
      if (selection.length > 0) {
        this.checkedCache[this.currentType] = selection;
      } else {
        delete this.checkedCache[this.currentType];
      }
      this.$store.commit("log/SET_CHECKED_CACHE_LIST", this.checkedCache);
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-search-wrap {
  margin: -18px -10px 0 -15px;
  .group-header-wrap {
    height: 30px;
  }
  .tree-item-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

::v-deep .global-base-list-container{
  padding-top: 0;
}
::v-deep .group-container{
  margin-bottom: 65px !important;
}
</style>
